<template>
  <div class="comment-reply ">
    <!-- 导航栏 -->
    <van-nav-bar title="有XX条回复">
      <span slot="title">
        {{ curComment.reply_count ? `有${curComment.reply_count}条回复` : "暂无回复" }}
      </span>
      <template #right>
        <van-icon name="close" color="#fff" @click="$emit('close')"></van-icon>
      </template>
    </van-nav-bar>
    <!-- 导航栏 -->

    <van-cell class="page-bg" title="评论项内容"></van-cell>
    <comment-item :comment="curComment"></comment-item>
    <van-cell class="page-bg" title="回复列表"></van-cell>
   <commentList :sourceId='curComment.com_id' :list='commentReplyList' type='c'></commentList>

    <!-- 底部区域 -->
    <div class="reply-bottom">
      <van-button 
      class="write-btn" 
      size="small" 
      round
      @click="commentReplyShow=true"
      >写评论</van-button>
    </div>
    <!-- /底部区域 -->

    <!-- 评论回复 -->
    <van-popup v-model="commentReplyShow" position="bottom">
        <commentPost 
        type="c" 
        :target="curComment.com_id" 
        @update-list='updateList'
        ></commentPost>
    </van-popup>

    <!-- 发布评论 -->
    <!-- /发布评论 -->
  </div>
</template>

<script>
import commentItem from "@/views/article/components/comment-item";
import commentPost from '@/views/article/components/comment-post'
import commentList from '@/views/article/components/comment-list'
export default {
  name: "CommentReply",
  components: { commentItem,commentPost,commentList },
  props: {
    //   当前评论项信息
    curComment: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
        commentReplyShow:false,
        commentReplyList:[]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
      updateList(val) {
          console.log(val);
          this.commentReplyList.unshift(val.new_obj)
          this.commentReplyShow=false
          this.curComment.reply_count++
      }
  },
};
</script>
<style scoped lang="less">
.scroll-wrap {
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  bottom: 88px;
  overflow-y: auto;
}

.reply-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #d8d8d8;
  .write-btn {
    width: 60%;
  }
}
.page-bg {
  background-color: #d8d8d8;
}
.van-nav-bar {
    background-color: #3296fa;
}
</style>
